<?php $gridId=rand(0,10000); ?>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.menu.RangeMenu.prototype.icons = {
	  gt: '<?=$this->baseUrl?>/public/images/img/greater_then.png', 
	  lt: '<?=$this->baseUrl?>/public/images/img/less_then.png',
	  eq: '<?=$this->baseUrl?>/public/images/img/equals.png'
	};
	Ext.grid.filter.StringFilter.prototype.icon = '<?=$this->baseUrl?>/public/images/img/find.png';
//定义详细信息插件
var expander = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>telephone:</b> {telephone}</p><br>',
            '<p><b>country_id:</b>{country_id}</p>'
        )
    });

Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.app.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
						this.store.clearFilter(false);
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
				var search = v;
				search = search.replace('.','\\.');
				search = search.replace('*','.*');
				search = search.replace('?','.?');
				var re = new RegExp(search);
				this.store.filterBy(function(record,id){
						var find=(search_combo.getValue()=="")?'client_name':search_combo.getValue();
						//return ds.load({params:{start:0,limit:15,find:find}});
					//	switch(search_combo.getValue()){
//							case "product_name":
//								return re.exec(record.data.product_name);
//								break;
//							case "client_name":
//								return re.exec(record.data.client_name);
//								break;
//							case "client_address":
//								return re.exec(record.data.client_address);
//								break;
//							default:
//								return re.exec(record.data.client_name);
//							}
					
				});
        this.hasSearch = true;
        this.triggers[0].show();
    }
}); 	
//定义数据源

var ds=new Ext.data.Store({
							  proxy:new Ext.data.HttpProxy({
									url:'<?=$this->baseUrl?>/site/orderdata/id/<?=$this->id;?>'
									}),
							  reader:new Ext.data.JsonReader({
									root:'results',
									totalProperty:'total'
									},[
									   {name:'order_id',mapping:'o_increment_id'},
									   {name:'product_name',mapping:'o_increment_product'},
									   {name:'client_name',mapping:'o_client_name'},
									   {name:'client_address',mapping:'o_client_address'},
									   {name:'order_time',mapping:'o_increment_date'},									  
									   {name:'order_status',mapping:'o_increment_status'},
									   {name:'telephone',mapping:'o_client_telephone'},
									   {name:'country_id',mapping:'o_client_country'}
									   
									   ])
	});	
//定义筛选器
var filters = new Ext.grid.GridFilters({
	  filters:[
	    {type: 'numeric',  dataIndex: 'order_id'},
	    {type: 'string',  dataIndex: 'product_name'},
	    {type: 'string', dataIndex: 'client_name'},
	    {type: 'string',  dataIndex: 'client_address'}
	]});		 
//定义列模型
var cm=new Ext.grid.ColumnModel([	
								  	 //new Ext.grid.RowNumberer(),
									 {id:'order_id',header:'订单编号',dataIndex:'order_id',width:100},
									  {header:'下单时间',dataIndex:'order_time',renderer:show_date,width:200},
									 {header:'产品名',dataIndex:'product_name',width:150},
									 {header:'客户名',dataIndex:'client_name',width:150},
									 {header:'客户地址',dataIndex:'client_address',width:100},
									 {header:'订单状态',dateIndex:'order_status',width:100,renderer:show_status}
	]);
cm.defaultSortable = true; 


//每页显示记录数
	var mypagedata=[
				['10','10'],
				 ['15','15'],
				 ['20','20'],
				 ['40','40'],
				 ['200','200']
				 ];	
var page_size_store=new Ext.data.SimpleStore({
									   fields:[
											   {name:'id'},
											   {name:'name'},
									   		  ]
									   });
page_size_store.loadData(mypagedata);
var pagesize_combo=new Ext.form.ComboBox({
										 store:page_size_store,
										 width:50,										
										 emptyText:'10',
										 mode:'local',
										 triggerAction:'all',
										 valueField:'name',
										 displayField:'id'
										 });
pagesize_combo.on('select',function(e){										
										var pagesize=parseInt(e.getValue());
										pagBar.pageSize=pagesize;
										ds.load({params:{start:0,limit:pagesize}});
										//grid.render();
										});	
	var mySearchData=[
				['client_address','地址'],
				 ['client_name','客户'],
				 ['product_name','产品名']
				 ];	
var searchStore=new Ext.data.SimpleStore({
									   fields:[
											   {name:'type'},
											   {name:'name'},
									   		  ]
									   });
searchStore.loadData(mySearchData);
var search_combo=new Ext.form.ComboBox({
										 store:searchStore,
										 width:50,										
										 emptyText:'客户名',
										 mode:'local',
										 triggerAction:'all',
										 valueField:'type',
										 displayField:'name'
										 });
//定义分页条栏				 
var pagBar=new Ext.PagingToolbar({
										pageSize:30,
										store:ds,
										displayInfo:true,
										displayMsg:'第{0}到{1}条订单 共{2}条订单',
										emptyMsg:'no content',
										//plugins: filters,
										items:['-','每页显示',pagesize_combo,'条记录','-']
									 });
//定义工具栏								 
var tb=new Ext.Toolbar({
							items:[
										  {
											text:'删除',
											iconCls:'icn-delete',
											handler:function(){												
													var selectRows=grid.getSelectionModel().getSelections();												
												if(selectRows.length==0){
													Ext.MessageBox.alert('提示','请选择一条订单');
													}
												else{
													var message="你选择的是第";
													for(var i=0;i<selectRows.length;i++){
														message+=selectRows[i].get('order_id')+",";
														}
													Ext.MessageBox.alert('执行','你选择的是第'+message+'条数据');
													}
												}
											  },{xtype:'tbfill'},search_combo,
											  new Ext.app.SearchField({
												store: ds,
												emptyText: '关键字查询'
												})
								 ]
	});									
//定义容器
var grid=new Ext.grid.GridPanel({
									renderTo:'grid_<?=$gridId?>',
									store:ds,
									cm:cm,									
									height:500,
									minHeight:300,
									autoHeight:true,
									autoWidth:true,								
									//plugins: filters,
									plugins:[expander,filters],
									loadMask:{msg:'加载服务端数据中',store:ds},	
									autoScroll:true,
									stripeRows:true,									
        							animCollapse: false,
									//sm:new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
									monitorWindowResize: true,	
									title:'订单列表',
									sm:new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
									tbar:tb,
									bbar:pagBar
									});
//显示数据
ds.load({params:{start:0,limit:30}});
grid.render();
//注册行双击事件
grid.addListener('rowclick', gridRowDBLClick,this);

function　gridRowDBLClick(grid,rowIndex,e){
	expander.toggleRow(rowIndex);
	}
	
	
});



</script>
<body style="width:98%;height:100%">
<div id='grid_<?=$gridId?>'></div>
</body>
</html>